<template>
	<view class="content">
		<!-- 用户信息 -->
		<view class="user-info">
			<image class="avatar" src="/static/logo/logo_ico.png"></image>
			<text class="username">521赫兹</text>
		</view>

		<!-- 功能列表 -->
		<view class="list">
			<view class="list-item" @click="goToAccountSecurity">
				<text class="list-item-text">账号安全</text>
			</view>
			<view class="list-item" @click="goToPrivacySettings">
				<text class="list-item-text">隐私设置</text>
			</view>
			<view class="list-item" @click="goToAbout">
				<text class="list-item-text">关于我们</text>
			</view>
			<view class="list-item" @click="goToSettings">
				<text class="list-item-text">设置</text>
			</view>
			<view class="list-item" @click="goToFeedback">
				<text class="list-item-text">用户反馈</text>
			</view>
		</view>
	</view>
</template>

<script>
	import TabBar from '@/components/TabBar.vue'
	
	export default {
		components: {
			TabBar
		},
		data() {
			return {}
		},
		methods: {
			goToAccountSecurity() {
				uni.navigateTo({
					url: '/pages/account-security/index'
				});
			},
			goToPrivacySettings() {
				uni.navigateTo({
					url: '/pages/privacy-settings/index'
				});
			},
			goToAbout() {
				uni.navigateTo({
					url: '/pages/about/index'
				});
			},
			goToSettings() {
				uni.navigateTo({
					url: '/pages/settings/index'
				});
			},
			goToFeedback() {
				uni.navigateTo({
					url: '/pages/feedback/index'
				});
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0;
	}

	.user-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx;
		background: $uni-bg-color;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	}

	.username {
		font-size: 36rpx;
		color: $uni-color-title;
		font-weight: 500;
	}

	.list {
		width: 100%;
		background: $uni-bg-color;
	}

	.list-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 40rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
	}

	.list-item:active {
		background: darken($uni-bg-color, 5%);
	}

	.list-item:last-child {
		border-bottom: none;
	}

	.list-item-text {
		font-size: 32rpx;
		color: $uni-color-title;
	}
</style> 